<template>
  <div class="agreemt-box">
    <el-row :gutter="20">
      <el-col :span="8" class="npd30">
        <ComSidebar
          @returnContent="returnContentFn"
          @EventSelectAgreement="EventSelectAgreement"
          activeIndex="0"
          @Event-blurInput="blurInput"
          title="选择协议"
          @EventSelectSbider="selectSbider"
          :sidebarArr="agreementArr"
          @changeTitile="changeTitile"
        ></ComSidebar>
      </el-col>

      <el-col key="1" :span="16">
        <div class="contentMain">
          <NewCard :isright="true" :title="params.title?params.title:'编辑'">
            <!-- 当是项目协议的时候要三级类型才能编辑 -->
            <WangEditor
              :wangkey="1"
              ref="wangEditor"
              :list="currentContent"
              v-if="currentType==1 || (currentType==2 && params.type=='3')"
            ></WangEditor>
            <div class="maskLayer" v-else>请选择三级类型</div>

            <SubBtn v-if="currentType==1 || (currentType==2 && params.type=='3')">
              <template slot="btn">
                <el-button
                  round
                  @click="deleteFn"
                  v-if="currentType == 1 && !(params.typeId=='5' || params.typeId=='6' || params.typeId=='机构简介')"
                  v-hasPermi="['doc:richText:remove']"
                >删除</el-button>
                <el-button round @click="reset">重置</el-button>
                <el-button @click="save" type="primary" round v-hasPermi="['doc:richText:edit']">保存</el-button>
              </template>
            </SubBtn>
          </NewCard>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "../../../components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
// 协议类型
// import { agreementArr } from "@/wss/utils/wss.js";
import ComSidebar from "../../../components/ComSidebar.vue";
import WangEditor from "../../../components/wangEditor.vue";
import {
  getRichTextediEApi,
  getRichTextRemoveApi,
  getRichTextlistTitleApi
} from "@/wss/newApi_3-24/doc/richText.js";
import ComGetLaw from "../../../components/ComGetLaw.vue";
import { getRichTextAddApi } from "@/wss/newApi_3-24/doc/richText.js";
const arr = ["", undefined, null];
export default {
  name: "agreement",
  components: { NewCard, ComSidebar, WangEditor, ComGetLaw, SubBtn },

  data() {
    return {
      noDeleteArr: ["隐私协议", "用户协议"],
      currentType: 1,
      //参数
      params: {
        id: "",
        // Long	Y	来源
        type: "",
        // string	N	类型 1 专家宝典 2 商务宝典 3 ios隐私协议 4 ios用户协议 5 pc隐私协议 6 pc用户协议 7 安卓隐私协议 8 安卓用户协议 9 小程序隐私协议 10 小程序用户协议 11免责声明 12购买须知 13认证说明
        title: "",
        // string	N	标题
        content: "",
        // string	N	内容
        status: "0"
        // string	N	状态 0运行 1停止
      },
      // 当亲协议的内容
      currentContent: [],
      // 当前的类型
      // 当前点击的项目
      currentProject: {},
      // 协议类型
      agreementArr: [],
      // 协议列表查询参数
      pageing: {
        pageNum: 1,
        // string	Y	页号
        pageSize: 100,
        // "string	Y	大小"
        type: 14,
        // "string	N	类型 1 专家宝典 2 商务宝典 3 ios隐私协议 4 ios用户协议 5 pc隐私协议 6 pc用户协议 7 安卓隐私协议 8 安卓用户协议 9 小程序隐私协议 10 小程序用户协议 11免责声明 12购买须知 13认证说明"
        status: 0
        // string	N	状态 正常 1停用"
      }
    };
  },
  created() {
    this.getRichTextListFn();
  },
  methods: {
    // 改变普通协议标题
    async changeTitile(row) {
      let { code, msg } = await getRichTextediEApi(row);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg
      });
    },
    // 删除普通协议
    async deleteFn() {
      const _this = this;

      // 协议设置-普通协议，除隐私协议和用户协议之外，所有的协议可以删除
      if (_this.noDeleteArr.includes(_this.params.type)) {
        _this.$message({
          type: "warning",
          message: "隐私协议和用户协议不可删除"
        });
        return;
      }
      let { code, msg } = await getRichTextRemoveApi({
        id: _this.params.id
      });
      if (code != 200) return;
      _this.$message({
        type: "success",
        message: msg
      });
      // 重新获取协议列表
      _this.getRichTextListFn();
    },

    // 项目协议返回的数据
    returnContentFn([row = {}], editFormData) {
      this.currentContent = [row.content ?? ""];
      console.log("returnContentFnreturnContentFn");
      console.log(this.currentContent);
      this.params = Object.assign({}, row);
      // console.log(editFormData, "!!!");
      // this.params.type = editFormData.name;
      this.params.status = 0;
      this.params.title = editFormData.name;
      this.params.type = editFormData.type;
      this.params.typeId = editFormData.id;
      this.current;
    },
    EventSelectAgreement(type) {
      this.currentType = type;
      console.log(this.currentType);
    },
    // 重设
    reset() {
      this.$refs.wangEditor.setEditorDataFn("");
    },
    async blurInput({ name }) {
      let body = {
        typeId: name,
        // string	Y	类型 1 专家宝典 2 商务宝典 3 ios隐私协议 4 ios用户协议 5 pc隐私协议 6 pc用户协议 7 安卓隐私协议 8 安卓用户协议 9 小程序隐私协议 10 小程序用户协议 11免责声明 12购买须知 13认证说明
        status: "0",
        // string	Y	状态 0正常 1停止
        title: name,
        // string	Y	标题
        content: "",
        // string	N	文本内容
        type: 14
      };
      let { code, msg } = await getRichTextAddApi(body);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg
      });

      this.getRichTextListFn();
    },
    // 添加项目协议
    async addProjectAgreement() {
      const _this = this;

      let { code, msg } = await getRichTextAddApi(_this.params);
      if (code != 200) return;
      _this.$message({
        type: "success",
        message: msg
      });
      _this.getRichTextListFn();
    },

    // 保存
    async save() {
      const _this = this;
      let content = _this.$refs.wangEditor.getEditorDataFn();
      const params = _this.params;
      // currentType 2是项目 1是普通
      params.currentType = this.currentType == 2 ? 15 : 14;

      params.content = content;
      // console.log(arr.includes(params.id), _this.currentType == 2);
      // if (_this.currentType == 2 && arr.includes(params.id)) {
      //   this.addProjectAgreement();
      //   return;
      // }
      let { code, msg } = await getRichTextediEApi(params);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg
      });
    },

    async getRichTextListFn() {
      const _this = this;
      let {
        code,
        data: { rows }
      } = await getRichTextlistTitleApi(_this.pageing);

      if (code != 200) return;
      _this.agreementArr = JSON.parse(JSON.stringify(rows));
      this.selectSbider(_this.agreementArr[0]);
    },

    // 侧边栏选中的
    selectSbider(item) {
      const _this = this;

      _this.params = item;

      _this.currentContent = [item?.content ?? ""];
      console.log("侧边栏选中的");
      console.log(_this.currentContent);
    },

    selectActive(row) {},
    handleSelect() {}
  }
};
</script>

<style lang="scss" scoped>
.agreemt-box {
  height: calc(100% - 60px);
  .contentMain {
    flex: 1;
    height: 100%;
    width: 100%;
  }
  .el-row {
    height: 100%;
    margin-bottom: 0;
    .el-col {
      height: 100%;
    }
  }
}

::v-deep .el-col > div {
  height: 100%;
}
::v-deep .el-card__body {
  padding-bottom: 0px;
}
::v-deep .w-e-text > * {
  width: 100%;
}
::v-deep .el-card {
  position: relative;
  height: 100%;
  width: 100%;
}
::v-deep #wangEditor-1 {
  height: 100%;
}
::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}

::v-deep .contentMain .el-card__body > div {
  height: calc(100% - 95px);
}

::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
::v-deep .el-card__body > div #div1 {
  height: 100%;
}
::v-deep .el-card__body > div #div1 .w-e-toolbar {
  z-index: 2001 !important;
}
::v-deep .el-card__body > div #div1 .w-e-text-container {
  height: 80% !important;
  z-index: 2000 !important;
}
::v-deep .w-e-text-container {
  // border: unset !important;
}

::v-deep .npd30 .el-card__body {
  padding: 0;
}
::v-deep .npd30 .el-card__body > .top {
  margin: 0 30px;
}

.maskLayer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #999;
  font-size: 14px;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 2000 !important;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

@media (max-width: 1180px) {
}
</style>